<template>
	<view class="history-container">
		<view class="history-header">
			<text class="history-title">积分明细</text>
			<view class="filter-tabs">
				<text v-for="tab in filterTabs" :key="tab.value" class="filter-tab"
					:class="{ active: activeFilter === tab.value }" @click="setActiveFilter(tab.value)">
					{{ tab.label }}
				</text>
			</view>
		</view>

		<view class="history-list" v-if="pointsChangeRecords.length > 0">
			<view v-for="record in pointsChangeRecords" :key="record.id" class="history-item"
				@click="showRecordDetail(record)">
				<view class="record-icon" :class="getIconClass(record.changeSourceType)">
					{{ getSourceIcon(record.changeSourceType) }}
				</view>
				<view class="record-content">
					<view class="record-header">
						<text class="record-title">{{ getSourceText(record.changeSourceType) }}</text>
						<text class="record-points" :class="{ 
								positive: record.pointsChange > 0, 
								negative: record.pointsChange < 0 
							}">
							{{ record.pointsChange > 0 ? '+' : '' }}{{ record.pointsChange }}
						</text>
					</view>
					<view class="record-footer">
						<text class="record-time">{{ formatTime(record.createdTime) }}</text>
						<text class="record-balance">余额: {{ record.pointsAfter }}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="empty-state" v-else-if="!loading">
			<text class="empty-icon">📋</text>
			<text class="empty-text">暂无积分记录</text>
		</view>

		<!-- 加载状态 -->
		<view class="loading-state" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 操作按钮区域 -->
		<view class="action-buttons" v-if="pointsChangeRecords.length > 0">
			<!-- 加载更多按钮：当有更多数据时显示 -->
			<view class="action-btn load-more-btn" v-if="hasMore" @click="handleLoadMore">
				<text class="btn-text">加载更多</text>
				<text class="btn-icon">⬇</text>
			</view>

			<!-- 收起按钮：当数据超过初始页大小时显示 -->
			<view class="action-btn collapse-btn" v-if="pointsChangeRecords.length > 5" @click="handleToggleExpand">
				<text class="btn-text">收起</text>
				<text class="btn-icon">⬆</text>
			</view>

			<!-- 没有更多数据提示 -->
			<view class="no-more-hint" v-if="!hasMore && pointsChangeRecords.length > 5">
				<text class="hint-text">已加载全部数据</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import type { PointsChangeRecord } from '@/api/point/point'

	interface Props {
		userId : number
		pointsChangeRecords : PointsChangeRecord[]
		loading ?: boolean
		hasMore ?: boolean
		isExpanded ?: boolean
	}

	interface Emits {
		(e : 'load-more') : void
		(e : 'refresh') : void
		(e : 'toggle-expand') : void
		(e : 'filter-change', filterType : string) : void
	}

	const props = withDefaults(defineProps<Props>(), {
		loading: false,
		hasMore: true,
		isExpanded: false
	})
	const emit = defineEmits<Emits>()

	const activeFilter = ref('all')

	// 筛选选项
	const filterTabs = [
		{ label: '全部', value: 'all' },
		{ label: '收入', value: 'income' },
		{ label: '支出', value: 'expense' }
	]

	// 设置活跃筛选器
	const setActiveFilter = (filter : string) => {
		activeFilter.value = filter
		// 触发筛选变化事件，让父组件重新请求数据
		emit('filter-change', filter)
	}

	// 获取来源图标
	const getSourceIcon = (sourceType : number) => {
		const iconMap = {
			1: '📝', // 答题奖励
			2: '📄', // 发帖奖励
			3: '👍', // 帖子获赞
			4: '⭐', // 帖子被收藏
			5: '💬', // 发评论奖励
			6: '❤️', // 评论获赞
			7: '🛍️', // 商品兑换
			8: '⚙️', // 系统调整
			9: '🎉', // 活动奖励
			10: '📅' // 签到奖励
		}
		return iconMap[sourceType] || '📋'
	}

	// 获取图标样式类
	const getIconClass = (sourceType : number) => {
		if ([1, 2, 3, 4, 5, 6, 9, 10].includes(sourceType)) {
			return 'positive-icon'
		}
		return 'negative-icon'
	}

	// 获取来源文本
	const getSourceText = (sourceType : number) => {
		const textMap = {
			1: '答题奖励',
			2: '发帖奖励',
			3: '帖子获赞',
			4: '帖子被收藏',
			5: '发评论奖励',
			6: '评论获赞',
			7: '商品兑换',
			8: '系统调整',
			9: '活动奖励',
			10: '签到奖励'
		}
		return textMap[sourceType] || '未知来源'
	}

	// 格式化时间
	const formatTime = (time : string | Date) => {
		if (!time) return ''
		const date = new Date(time)
		const now = new Date()
		const diff = now.getTime() - date.getTime()

		if (diff < 60000) { // 1分钟内
			return '刚刚'
		} else if (diff < 3600000) { // 1小时内
			return Math.floor(diff / 60000) + '分钟前'
		} else if (diff < 86400000) { // 1天内
			return Math.floor(diff / 3600000) + '小时前'
		} else {
			return date.toLocaleDateString()
		}
	}

	// 显示记录详情
	const showRecordDetail = (record : PointsChangeRecord) => {
		uni.showModal({
			title: '积分详情',
			content: `来源：${getSourceText(record.changeSourceType)}\n变动：${record.pointsChange > 0 ? '+' : ''}${record.pointsChange}\n变动前：${record.pointsBefore}\n变动后：${record.pointsAfter}\n时间：${new Date(record.createdTime).toLocaleString()}`,
			showCancel: false
		})
	}

	// 加载更多
	const handleLoadMore = () => {
		emit('load-more')
	}

	// 切换展开状态
	const handleToggleExpand = () => {
		emit('toggle-expand')
	}
</script>

<style lang="scss" scoped>
	.history-container {
		background: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.history-header {
		padding: 30rpx 30rpx 20rpx;
		border-bottom: 1rpx solid #f0f0f0;

		.history-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}

		.filter-tabs {
			display: flex;
			gap: 20rpx;

			.filter-tab {
				padding: 10rpx 20rpx;
				background: #f5f5f5;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #666;
				transition: all 0.3s ease;

				&.active {
					background: #667eea;
					color: white;
				}
			}
		}
	}

	.history-list {
		padding: 0 30rpx;
	}

	.history-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f8f8f8;

		&:last-child {
			border-bottom: none;
		}

		.record-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			margin-right: 20rpx;

			&.positive-icon {
				background: linear-gradient(135deg, #4ecdc4, #44a08d);
			}

			&.negative-icon {
				background: linear-gradient(135deg, #ff6b6b, #ffa726);
			}
		}

		.record-content {
			flex: 1;

			.record-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 8rpx;

				.record-title {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}

				.record-points {
					font-size: 28rpx;
					font-weight: bold;

					&.positive {
						color: #4ecdc4;
					}

					&.negative {
						color: #ff6b6b;
					}
				}
			}

			.record-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.record-time,
				.record-balance {
					font-size: 22rpx;
					color: #888;
				}
			}
		}
	}

	.empty-state {
		padding: 80rpx 30rpx;
		text-align: center;

		.empty-icon {
			font-size: 80rpx;
			margin-bottom: 20rpx;
			display: block;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}

	.loading-state {
		padding: 40rpx 30rpx;
		text-align: center;

		.loading-text {
			font-size: 26rpx;
			color: #999;
		}
	}

	.action-buttons {
		padding: 20rpx 30rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20rpx 40rpx;
			border-radius: 30rpx;
			font-size: 26rpx;
			transition: all 0.3s ease;
			cursor: pointer;

			.btn-text {
				margin-right: 10rpx;
			}

			.btn-icon {
				font-size: 20rpx;
			}

			&.load-more-btn {
				background: #667eea;
				color: white;

				&:active {
					background: #5a6fd8;
					transform: scale(0.98);
				}
			}

			&.collapse-btn {
				background: #f0f0f0;
				color: #666;

				&:active {
					background: #e0e0e0;
					transform: scale(0.98);
				}
			}
		}

		.no-more-hint {
			padding: 20rpx;

			.hint-text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
</style>